<template>
 <view class="pb26">
  <u-row customStyle="margin-bottom: 20px;flex-wrap: wrap;" v-show="goods.length">
    <u-col span="6" v-for="good in goods" :key="good.id">
      <navigator class="goods-item" :url="`/pages/detail/index?id=${good.goods.id}`">
        <u--image :showLoading="true" :src="good.goods.cover_url" width="100%" height="200px"></u--image>
        <view class="title u-line-1">{{good.goods.title}}</view>
        <view class="flex justify-between">
          <view class="price">￥{{good.goods.price}}</view>
        </view>
      </navigator>
    </u-col>
  </u-row>
  <u-loadmore :status="status" />
 </view>
</template>

<script>
import { goodsCollects } from '@/config/api'
export default {
  data() {
   return {
     page: 1,
     goods: [],
     status: 'loadmore',
   }
  },
  onLoad() {
    this.getData()
  },
  methods: {
    async getData() {
      const params = {
        page: this.page
      }
      this.status = 'loading';
      const res = await goodsCollects({params})

      if(!res.data.length) {
        this.status = 'nomore';
      }
      this.goods = this.goods.concat(res.data)
    }
  },
  onReachBottom() {
    if(this.goods.length) {
      // 重新请求数据，带上分页参数
      this.page = this.page + 1
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
  .goods-item {
		margin-top: 20rpx;
		padding: 32rpx;
		box-shadow: 0 12rpx 20rpx 0 rgba($color: #000000, $alpha: .1);
		.title {
			margin: 10rpx;
			font-weight: bold;
		}
		.price {
			margin: 0 10rpx;
			color: red;
		}
		.sales {
			margin: 0 10rpx;
			color: #888;
			font-size: 24rpx;
		}
	}
</style>